import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import { Row, Col } from 'antd';
import SubmitList from '../submit/submitList';

import RecordList from './record';
import { fromBase64 } from '../../utils';
import colMap from '../task/col';

const styles = require('../app.less');

// 用于显示一个包下面的具体信息的，主要用于限制它下面包含的条目的列表
class PackDetail extends React.Component {
  constructor(p) {
    super(p);
    const { location } = this.props;
    this.packId = _.get(location, 'query.packId');
    this.data = fromBase64(_.get(location, 'query.data'));
  }
  render() {
    const { loading } = this.props;
    return (
      <div className={styles.container} >
        <h2>包详情</h2>
        <h3>详情:</h3>
        <Row>
          {
            Object.keys(this.data).sort((a, b) => {
              const keySort = Object.keys(colMap);
              return keySort.indexOf(a) - keySort.indexOf(b);
            }).map((key) => {
              let content = this.data[key];
              if (_.get(colMap, `[${key}].render`)) {
                content = colMap[key].render(this.data[key], this.data);
              }
              return (
                <Col sm={12} md={6} lg={8}>
                  <p><b>{_.get(colMap, `[${key}].title`) || key}</b>：{content}</p>
                </Col>
              );
            })
          }
        </Row>
        <br />
        <br />
        <RecordList
          fatherId={this.packId}
          loading={loading}
          hideCreate
          hasRecord
          filterCol={['last_dst_time', 'audio', 'doneNumber', 'lineNumber', 'image']}
        />
        <SubmitList fatherId={this.packId} />
      </div>
    );
  }
}

export default connect(state => state)(PackDetail);
